<template>
    <div class="page home-page" data-page="oneAlarm">
        <div class="link-page-nav">
            <a href="#" class="link" @click="$root.backToTab">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top" style="padding-bottom: 17px;">
            <div class="link-page-title">一键报警</div>
        </div>
        <div class="form-content  page-content spdbottom120">
            <textarea id="oneAlarmVoiceTextarea{{getNewId}}" class="voiceArea" placeholder="请描述报警详情"></textarea>
            <div class="voice">

                <div id="oneAlarmVoice" class="voice-before" @click=oneAlarmVoice>
                    <i class="iconfont icon-yuyin1"></i>点击语音输入
                </div>
                <div class="voice-after" style="display: none">
                    <div class="voice-after-time">
                        <i class="iconfont icon-yuyin-copy"></i>
                    </div>
                    <div class="delete">
                        <i class="iconfont icon-icon-shanchu-copy"></i>
                    </div>
                </div>
            </div>
            <div id="keyAlarmPic_createTrouble_{{getNewId}}" style="margin: 10px 0;"></div>
            <div>
                <div id="cockInMap_{{getNewId}}" class="highDanger-item-border">
                </div>
                <textarea id="clockAddr_{{getNewId}}" style="width:100%" placeholder="明确的描述能够确保他人快速定位警报位置"></textarea>
                <span class="highDanger-item-unit" ></span>
            </div>
            <div class="rdsp-fix-botttom" style="margin-top: 30px; margin-bottom: 39px;" @click="submitAlarm">提交
            </div>
        </div>
    </div>
</template>
<script>
    return {
        data() {
            return {
                getNewId: (new Date()).getTime(),
                imageArr: [],
                pageName: 'oneAlarm',
                lon: 0, //用户当前位置经度
                lat: 0, //用户当前位置纬度
                voiceUrl: '',
                wavLength: 0,
                flag: false
            }
        },
        methods: {
            //点击开始语音
            oneAlarmVoice: function () {
                let self = this
                if (getClickEnabel(4000)) {
                    native.startVoice("oneAlarmVoiceTextarea" + self.getNewId, true);
                }
            },
            //语音输入回调
            voiceCollectionData: function (voiceStr, componentId) {
                let self = this
                var text = $("#" + componentId)[0].value;
                if (!voiceStr || "" === voiceStr.trim()) {
                    self.flag=true
                    app.methods.showToastCenter("未能识别您说的语音,请重试。");
                } else {
                    self.flag=true
                    $("#" + componentId).val(text + voiceStr);
                }
            },
            //b百度地图渲染
            baiduMap: function () {
                let self = this;
                var map = new BMap.Map("cockInMap_" + self.getNewId);
                var point = new BMap.Point(self.lon, self.lat);
                map.centerAndZoom(point, 15);
                //坐标转换为地址
                var gc = new BMap.Geocoder();
                gc.getLocation(point, function (rs) {
                    var addComp = rs.addressComponents;
                    var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                    $("#clockAddr_" + self.getNewId).val(address);
                });
            },
            //语音解析回调
            callbackVoiceFile: function (voiceUrl, wavLength) {
                let self = this
                self.voiceUrl = voiceUrl
                self.wavLength = wavLength
                let text = jQuery('#oneAlarmVoiceTextarea' + self.getNewId).val()
                    let imgLen = self.imageArr.length
                if (getClickEnabel(4000)) {
                    let text = jQuery('#oneAlarmVoiceTextarea' + self.getNewId).val()
                    let imgLen = self.imageArr.length
                    if (text == '') {
                        app.methods.showToastCenter('报警详情描述不能为空')
                        return false
                    }
                    if (imgLen == 0) {
                        app.methods.showToastCenter('图片或视频不能为空')
                        return false
                    }
                    let params = {
                        orgId: userInfor.org.id,
                        alarmDesc: text,
                        hiddenDangerVoice: self.voiceUrl,
                        voiceLength: self.wavLength,
                        addrDesc: $("#clockAddr_" + self.getNewId).val(),
                        longitude: self.lon,
                        latitude: self.lat,
                        picUrls: self.imageArr.join(','),
                        createAccount:userInfor.accountName
                    }
                    Dao.creatKeyAlarm(params, function () {
                        common.loading(0);
                        app.methods.showToastCenter('警报已创建');
                        app.methods.backToTab();
                    })
                    self.flag=false
                }
            },
            //创建一键报警
            submitAlarm: function () {
                let self = this
                if(self.flag){
                    //如果有语音则调用语音存放
                    native.saveTheVoiceFile(Number(userInfor.org.id));
                }else{
                    let text = jQuery('#oneAlarmVoiceTextarea' + self.getNewId).val()
                    let imgLen = self.imageArr.length
                    let address =$("#clockAddr_" + self.getNewId).val()
                    if (text == '') {
                        app.methods.showToastCenter('报警详情描述不能为空')
                        return false
                    }
                    if (imgLen == 0) {
                        app.methods.showToastCenter('图片或视频不能为空')
                        return false
                    }
                    if (address == '') {
                        app.methods.showToastCenter('地址不能为空')
                        return false
                    }
                    if (getClickEnabel(4000)) {
                   
                    let params = {
                        orgId: userInfor.org.id,
                        alarmDesc: text,
                        hiddenDangerVoice: self.voiceUrl,
                        voiceLength: self.wavLength,
                        addrDesc: $("#clockAddr_" + self.getNewId).val(),
                        longitude: self.lon,
                        latitude: self.lat,
                        picUrls: self.imageArr.join(','),
                        createAccount:userInfor.accountName
                    }
                    Dao.creatKeyAlarm(params, function () {
                        common.loading(0);
                        app.methods.showToastCenter('警报已创建');
                        app.methods.backToTab();
                    })
                }
                }
                
            },
            //获取原生回调的位置信息
            getNativeBackLocation: function (longitude, latitude, location) {
                var self = this;
                self.lon = longitude;
                self.lat = latitude;
                self.baiduMap();
            },
        },
        on: {
            pageInit: function () {
                let self = this
                //上传
                upLoadImagesCompt(jQuery("#keyAlarmPic_createTrouble_" + self.getNewId), function (pic, isAdd) {
                    let _pic = common.addWatermark(pic)
                    if (isAdd == "add") {
                        self.imageArr.unshift(_pic);
                    } else {
                        let index = self.imageArr.indexOf(_pic);
                        self.imageArr.splice(index, 1);
                    }
                }, true, 6, 'createTrouble_container_' + self.getNewId, 'createTrouble_pick_' + self.getNewId,'',true);
                native.requestLocation();//调用原生定位
            }
        }
    }
</script>
<style scoped>
    .form-content {
        padding: 0 20px 120px 20px;
    }

    .voiceArea {
        width: 100%;
        min-height: 120px;
        margin-bottom: 20px;
        border: 1px solid rgba(225, 225, 225, 0.9);
        box-shadow: 0px 1px 10px 0px rgba(181, 200, 206, 0.5);
        border-radius: 6px;
        padding: 10px;
    }

    .voice-before {
        width: 100%;
        height: 35px;
        line-height: 30px;
        background: rgba(112, 167, 241, 0.2);
        border: solid 0.5px #2196f3;
        color: #2196f3;
        text-align: center;
    }

    .rdsp-fix-botttom {
        margin-top: 42px;
        margin-left: 5%;
        width: 90%;
        height: 40px;
        line-height: 40px;
        bottom: 10px;
        background-color: #378bf6;
        color: #fff;
        text-align: center;
        font-size: 17px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
</style>